<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="d3.js"></script>
  <script src="events.js"></script>
</head>
<body>

  <div>
    <svg id="coords" width="300" height="300" style="background:lightgrey">
    </svg>

    <svg id="coords2" width="300" height="300" style="background:lightgrey">
    </svg>
  </div>

  <div>
    <svg id="brush1" width="300" height="300" style="background:lightgrey">
    </svg>

    <svg id="brush2" width="300" height="300" style="background:lightgrey">
    </svg>
  </div>

  <div>
    <svg id="dragdrop" width="600" height="200" style="background:lightgrey">
      <circle cx="100" cy="100" r="20" fill="red" />
      <circle cx="300" cy="100" r="20" fill="green" />
      <circle cx="500" cy="100" r="20" fill="blue" />
    </svg>

    <svg id="dragdrop2" width="600" height="200" style="background:lightgrey">
      <circle cx="100" cy="100" r="20" fill="red" />
      <circle cx="300" cy="100" r="20" fill="green" />
      <circle cx="500" cy="100" r="20" fill="blue" />
    </svg>
  </div> 

  <div>
    <svg id="stagger" width="600" height="300" style="background:lightgrey"/>
  </div>
  
  <div>
    <svg id="lissajous" width="300" height="300" style="background:lightgrey"/>
    <svg id="voters" width="300" height="300" style="background:lightgrey"/>
  </div>

</body>
</html>
